<template>
    <div>
        <van-nav-bar
            title = "设置"
            left-text = "返回"
            left-arrow
            @click-left = "goBack"
        />
        <div class="set_test">
            <van-cell title="修改密码"  is-link  @click="showList = true"/>
            <van-cell title="检查更新"  is-link  />
            <van-cell title="意见反馈"  is-link to="addressList" />
            <van-cell title="关于我们"  is-link  />
        </div>
       
        <button class="bottomBtn" @click="logOff">退出登录</button>

        <!-- 修改密码弹窗 -->
        <van-popup
        v-model="showList"
        round
        position="bottom"
        style="height: 50%; padding-top: 5px;"
        >
            <van-field
                v-model="password"
                label="原密码"
                type="password"
                icon="clear"
                placeholder="请输入原始密码"
                required
                @click-icon="username = ''"
                :error-message = "passwordError"
            />
            <van-field
                v-model="newPassword"
                type="password"
                label="新密码"
                placeholder="请输入新密码"
                required
                :error-message="newPasswordError"
            />
            <van-field
                v-model="newPassword1"
                type="password"
                label="再输入新密码"
                placeholder="请再次输入新密码"
                required
                :error-message="newPasswordError1"
            />
            <div class="register-button">
                <van-button type="primary" @click="modifyAction" size="large" >修改密码</van-button>
            </div>
        </van-popup>
        
    </div>
</template>

<script>
    import axios from 'axios'
    import { Toast } from 'vant'
    export default {
        data(){
            return{
                openLoad: false,  //是否开启用户的Loading状态
                showList: false,
                userName: null,
                userId: null,
                password: null,
                newPassword: null,
                newPassword1: null,
                passwordError: '',
                newPasswordError: '',
                newPasswordError1: '',
            }
        },
        created(){
            if(localStorage.userInfo){
                let userInfo = JSON.parse(localStorage.userInfo)
                this.userName = userInfo.userName
                this.userId = userInfo.userId
                // console.log("111111",this.userId);
            }
        },
        mounted:function(){
            this.$store.dispatch('HIDENAV')
        },
        destroyed:function(){
            this.$store.dispatch('SHOWNAV')
        },
        methods:{
            goBack(){
                this.$router.go(-1)
            },
            modifyAction(){
                if(this.userName){
                    this.checkModify() && this.axiosChangePassword()
                }else{
                    Toast.fail('当前没登陆用户')
                    this.$router.push({ path:'/login' })
                }
                
            },
            logOff(){//退出登录
                this.$dialog.confirm({
                    title: '',
                    message: this.userName ? '是否确定退出登录？' : '转到登录？',
                })
                .then(() => {
                    localStorage.removeItem('userInfo')
                    this.$router.push({ path:'/login' })
                    // this.$router.go(-1);
                })
                .catch(() => {
                    // on cancel
                });   
            },
            //axios用户修改密码方法
            axiosChangePassword(){
                    axios({
                    url: 'http://localhost:3000/user/changePassword',
                    method: 'put',
                    data:{
                        userId: this.userId,
                        userName:this.username,
                        password:this.password,
                        newPassword: this.newPassword1
                    }
                    }).then(res=>{
                        const {data,status} = res
                        if(status === 200){
                            if(data.msg === "输入密码错误"){
                                this.password = null
                                this.newPassword = null
                                this.newPassword1 = null
                                Toast.fail('输入密码错误')
                            }
                            if(data.msg === "修改成功"){
                                Toast.success('修改成功')
                                localStorage.removeItem('userInfo')
                                this.$router.push('/login')
                            }
                        }
                        console.log(res);
                    })   
                                  
            },
            //表单输入长度校验
            checkModify(){
                if(this.password.length<6){
                    this.passwordError = "密码长度错误"
                    return false
                }else{
                    this.passwordError = ""
                    if(this.newPassword&&this.newPassword.length>5){
                        this.newPasswordError = ""
                        if(this.newPassword1&&this.newPassword1 === this.newPassword){
                            this.newPasswordError1 = ""
                            return true
                        }else{
                            this.newPasswordError1 = "两次输入密码必须相同"
                            return false
                        }                   
                    }else{
                        if(!this.newPassword){
                            this.newPasswordError = "新密码为必填项"
                        }else{
                            if(this.newPassword.length<6){
                                this.newPasswordError = "密码必须大于或等于6位"
                            }
                        }                  
                        return false
                    }
                }
            }
        }
        
    }
</script>

<style >
    #app{
        background-color: #FDF5E6;
    }
    .set_test{
        text-align: left;
        margin-top: 5px;
        background-color: white;
    }
    .set_test .van-cell{
        border-bottom: 1px solid #E6E6FA;
    }
    .bottomBtn{
        margin-top: 20px;
        width: 6.5rem;
        height: 2.8rem;
        background-color: #07c160;
        border: 1px solid #07c160;
    }
    
</style>